<template>
  <el-row :gutter="10">
    <el-col :span="7">
      <BBCard title="分类商品数量(饼图)">
        <PieEcharts :data="goodsCount"></PieEcharts>
      </BBCard>
    </el-col>
    <el-col :span="10">
      <BBCard title="不同城市商品销售"></BBCard>
    </el-col>
    <el-col :span="7">
      <BBCard title="分类商品数量(玫瑰图)">
        <PieEcharts2 :data="goodsCount"></PieEcharts2>
      </BBCard>
    </el-col>
  </el-row>
  <el-row :gutter="10" class="content-row">
    <el-col :span="12">
      <BBCard title="分类商品的销售">
        <!-- <BBEchart width="500px" height="400px" :options="options"></BBEchart> -->
        <BarEcharts :data="goodsSale.Value" :dataAxis="goodsSale.xAxis" title="销售量"></BarEcharts>
      </BBCard>
    </el-col>
    <el-col :span="12">
      <BBCard title="分类商品的收藏">
        <BarEcharts :data="goodsFavor.Value2" :dataAxis="goodsFavor.xAxis2" title="收藏量"></BarEcharts>
      </BBCard>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { computed, defineComponent} from "vue";
import BBCard from "@/base-ui/card";
import { useStore } from "@/store";
import {
  PieEcharts,
  PieEcharts2,
  BarEcharts,
} from "@/components/page-echarts/index";

export default defineComponent({
  name: "dashboard",
  components: {
    BBCard,
    PieEcharts,
  PieEcharts2,
  BarEcharts,
  },
  setup() {
    const store = useStore();
    store.dispatch("analysis/getEchartDataAction");
    const goodsCount = computed(() => {
      return store.state.analysis.categoryGoodsCount.map((item) => {
        return {
          name: item.name,
          value: item.goodsCount,
        };
      });
    });

    // console.log(goodsCount);
    const goodsSale = computed(() => {
      const xAxis: string[] = [];
      const Value: any[] = [];
        const goodsSale = store.state.analysis.categoryGoodsSale;
        for (const item of goodsSale) {
        xAxis.push(item.name);
        Value.push(item.goodsCount);
      }
      return {
        xAxis,
        Value,
      };
    });

    const goodsFavor = computed(() => {
      const xAxis2: string[] = [];
      const Value2: any[] = [];
        const goodsFavor = store.state.analysis.categoryGoodsFavor;
        for (const item of goodsFavor) {
        xAxis2.push(item.name);
        Value2.push(item.goodsFavor);
      }
      return {
        xAxis2,
        Value2,
      };
    });
    
    

    return {
      goodsCount,
      goodsSale,
      goodsFavor 
    };
  },
  
});
</script>

<style scoped lang='less'>
.content-row {
  margin-top: 20px;
}
</style>
